<div>
	<div>
		<div style="border-top: 1px solid #D9DFE5;" id="jGridForGroupRequirements"></div>
	</div>
	<div style="margin-top: 3px;">
		<div id="jGridForDistributions"></div>
	</div>
</div>
<style>
#jGridForGroupProductionOrders .pageBar {
}
</style>
<script>
(function($){
	var $page = DWZ.context(), 
	$grid = $('#jGridForGroupRequirements', $page),
	$detailGrid = $('#jGridForDistributions', $page),
	dateFmt = 'yyyy-MM-dd', timeFmt = 'yyyy-MM-dd HH:mm:ss',
	gridLayoutH = 90, detailLayoutH = 351,
	condition = JSON.parse('<#noescape>${condition!"{}"}</#noescape>'),
	eCodes = JSON.parse('<#noescape>${eCodes!"[]"}</#noescape>'),
	
	requirementColumns = [
		{field: '_index', text: '<@label key="serialNumber.C">序号</@label>', width: 40},
		{field: 'requirementNum', text: "<@label key='requirementNum.C'>需求编号</@label>", defaultOrder: 'desc', width: 100},
		{field: 'materialCode', text: "<@label key='materialCode.C'>物料编号</@label>", width: 80},
		{field: 'materialText', text: "<@label key='materialText.C'>物料名称</@label>", width: 80},
		{field: 'materialSpec', text: "<@label key='materialspec.C'>物料规格</@label>", width: 80},
		{field: 'requirementQuantity', text: "<@label key='requirementQuantity.C'>需求数量</@label>", width: 60},
		{field: 'distributionQuantity', text: "<@label key='distributiveQuantity.C'>已配数量</@label>", width: 50},
		{field: 'createUser', text: "<@label key='createUser.C'>创建人</@label>", width: 60},
		{field: 'createDateTime', type: 'date', dateFmt: timeFmt, text: "<@label key='createDateTime.C'>创建时间</@label>", width: 120},
		{field: 'expectedArrivalDateTime', type: 'date', dateFmt: timeFmt, text: "<@label key='expectedArrivalDateTime.C'>期望到货时间</@label>", width: 120},
		{field: 'closeDateTime', type: 'date', dateFmt: timeFmt, text: "<@label key='closeDateTime.C'>需求关闭时间</@label>", width: 120},
		{field: 'requirementTriggerModeText', text: "<@label key='requirementTriggerMode.C'>需求触发策略</@label>", width: 120},
		{field: 'statusEText', text: "<@label key='RequirementStatus.C'>状态</@label>", width: 60},
		{field: 'productionOrderNum', text: "<@label key='productionOrder.C'>生产订单</@label>", width: 100},
		{field: 'productionControlNum', text: "<@label key='productionControlNum.C'>生产管理号</@label>", width: 100},
		{field: 'workcenterText', text: "<@label key='workCenter.C'>工作中心</@label>", width: 80},
		{field: 'workunitText', text: "<@label key='workUnit.C'>作业单元</@label>", width: 80},
		{field: 'warehouseText', text: "<@label key='theLine.C,warehouse.C'>线边仓库</@label>", width: 80},
		{field: 'storageLocationText', text: "<@label key='theLine.C,storageLocation.C'>线边库位</@label>", width: 80},
		{field: 'pullStrategyText', text: "<@label key='pullStrategy.C'>拉动策略</@label>", width: 80},
		{field: 'distributionTriggerModeText', text: "<@label key='distributionTriggerMode.C'>配送触发策略</@label>", width: 80},
		{field: 'distributionModeText', text: "<@label key='distributionMode.C'>配送形式</@label>", width: 80},
		{field: 'distributionUser', text: "<@label key='distributionUser.C'>配送人员</@label>", width: 80},
		{field: 'distributionTimeoutFlag', text: "<@label key='distributionTimeoutFlag.C'>超时</@label>", width: 80, transform: function(data){
            if (data == 0) {
                return '<@label key="no.C">否</@label>';
            } else if (data == 1) {
                return '<@label key="yes.C">是</@label>';
            }
        }},
		{field: 'processOperationId', text: "<@label key='processOperationId.C'>工艺工序</@label>", width: 80},
		{field: 'modifyUser', text: "<@label key='modifyUser.C'>修改人</@label>", width: 60},
		{field: 'modifyDateTime', type: 'date', dateFmt: timeFmt, text: "<@label key='modifyDateTime.C'>修改时间</@label>", width: 120}
	],
	
	distributionColumns = [
		{field: '_index', text: '<@label key="serialNumber.C">序号</@label>', width: 40},
		{field: 'distributionNum', text: "<@label key='distributionCode.C'>配送编号</@label>", width: 100},
		requirementColumns[2],
		requirementColumns[3],
		requirementColumns[4],
		{field: 'distributionQuantity', text: "<@label key='requiredQuantity.C'>需配数量</@label>", width: 100},
		{field: 'actualQuantity', text: "<@label key='actualQuantity.C'>实配数量</@label>", width: 100},
		requirementColumns[8]
	];
	
	$grid.jGrid({
		height: 220,
		layoutH: gridLayoutH,
		width: 2800,
		base: hostUrl + '/requirementStatus/',
		url: 'getRequirementsByStatus',
		//autoLoad: false,
		columns: requirementColumns,
		orderable: false,
		hasBorder: true,
		getQueryData: function() {
			return $.extend(condition, {ordersString: 'requirementNum desc'});
		},
		gridbars: [
			{icon: 'export', text: '<@label key="exportToExcel.D">导出</@label>', title: '<@label key="confirmexportToExcel.M"></@label>', 
			target: 'export', href: 'exportRequirementsToExcel', menuCode: 'excel_export', exportAll: true}
		]
	});
	
	var requirementNum = '';
	
	$('tbody', $grid).on('click', 'tr', function() {
		var $tr = $(this);
		requirementNum = $tr.data().requirementNum;
		$detailGrid.jGrid('loadData', {requirementNum: requirementNum});
		toggleGrid(false);
	});
	
	$detailGrid.jGrid({
		layoutH: detailLayoutH,
		base: hostUrl + '/requirementStatus/',
		url: 'getDistributionsByRequirement',
		autoLoad: false,
		columns: distributionColumns,
		hasBorder: true,
		getQueryData: function() {
			return {requirementNum: requirementNum};
		},
		gridbars: [
			{icon: 'open', text: '展开列表', title: '展开列表', target: 'action', action: function() {
				expandDetailGrid();
			}},
			{icon: 'export', text: '<@label key="exportToExcel.D">导出</@label>', title: '<@label key="confirmexportToExcel.M"></@label>', 
			target: 'export', href: 'exportDistributionsToExcel', menuCode: 'excel_export', exportAll: true}
		],
		orderable: false,
		trselectable: false
	});
	
	var $cosIcon = $('<li class="" style="float: right;"><a target="" href="javascript:void(0);" class="expand"><span></span></a></li>')
	.appendTo($('<ul class="toolBar"/>').appendTo($('.panelBar:first', $detailGrid))).on('click', function(){
		toggleGrid(true);
	}),
	
	toggleGrid = function(isDisplay) {
		var $gridPart = $('.gridPart', $grid), $tbody = $('.gridBody', $gridPart);
		if (isDisplay) {
			resizeDetailGrid();
			$grid.parent().slideDown('fast');
			$gridPart.animate({height: $page.height() - 106}, 'fast', function(){
				$gridPart.attr({layoutH: 63});
				$tbody.attr({layoutH: 106});
				$detailGrid.hide();
			});
		} else {
			$gridPart.removeAttr('layoutH').animate({height: 200}, 'fast', function(){
				$tbody.removeAttr('layoutH').height(158);
				$('.gridScrollerBar>div', $detailGrid).height(1);
				$detailGrid.fadeIn(20);
			});
		}
	},
	
	expandDetailGrid = function() {
		var $p = $grid.parent(), $gridPart = $('.gridPart', $detailGrid), $tbody = $('.gridBody', $detailGrid);
		$p.slideUp('falst');
		$gridPart.attr({layoutH: 73}).animate({
			height: $page.height() - 112
		}, 'falst');
		$tbody.attr({layoutH: 111}).height($page.height() - 155);
	},
	
	resizeDetailGrid = function() {
		var $gridPart = $('.gridPart', $detailGrid), $tbody = $('.gridBody', $detailGrid);
		$detailGrid.css('margin-top', '3px');
		$gridPart.attr({layoutH: 324}).height($page.height() - 324 - 44);
		$tbody.attr({layoutH: 351}).height($page.height() - 351 - 44);
	};
})(jQuery);
</script>